import { ViewChildren, ViewChild, Component, QueryList, ElementRef } from '@angular/core';
import { Platform, NavController, Slides } from 'ionic-angular';

import { Fun } from '../../providers/fun';
import { MyComponent } from '../testp/testp';
import { PubApi } from '../../providers/pubapi';

declare var echarts;
declare var $;

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})


export class HomePage {
    @ViewChildren('projBarCharts') myChildComponents2: QueryList<ElementRef>;
    @ViewChild('projslide') slides2: Slides;
    public phone: any;
    public name: any;
    projList: Array<string> = [];
    selectproj: string = null;
    generaldata: any;
    cause: string;
    public engineerdata = [];
    public bardata = [];
    public Position:any;

    constructor(public platform: Platform, public navCtrl: NavController, public pubapi: PubApi) {
        ///加载主工程列表
        var that = this;
        this.pubapi.get("EngineerCreate/GetProjectGroupList", function (res) {
    
            let r = res.data;
            r.forEach((item) => {
                that.projList.push(item.ProjectGroupName);
            })
            if (that.projList[0]) {
                that.selectproj = that.projList[0];//初始化默认主工程
            }
        })
        ///EngineerCreate/MobileGetAll
        this.pubapi.get("EngineerCreate/MobileGetAll", function (res) {
            let rr = res.data;

        })
        platform.ready().then(() => {
            this.phone = Fun.getcookie("phone");
            this.name = Fun.getcookie("name");
            this.Position=Fun.getcookie("Position");

            $("#Js_tixing").click(function () { });
            // 指定图表的配置项和数据


        });

    }


    ionViewDidEnter() {

        this.initdata(this.selectproj, 0);


    }
    ////取出工程名和完工率的数组数据
    async initdata(proj, index) {
        let that = this;

        await this.pubapi.get("EngineerCreate/MobileGetAll?GroupName=" + proj + "", function (res) {
            that.engineerdata = [];
            that.bardata = [];
     
            let data = res.data;
            data.forEach((item) => {
                that.engineerdata.push(item.Name);
                that.bardata.push(item.CompletionRate);
            })
            that.iniechart(that.engineerdata, that.bardata, index)
        })


    }
    ///完成数据添加到echat
    iniechart(engineer, data, index) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init($(".echartBox").eq(index).get(0));
        var option = {
            title: {
                text: '',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['工程进度']
            },
            grid: {
                left: '1%',
                right: '6%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                  axisLabel: {  
                  show: true,  
                  interval: 'auto',  
                  formatter: '{value} %'  
                },  
                boundaryGap: [0, 0.1]
            },
            yAxis: {
                type: 'category',
           
                axisLabel:{
                    rotate:60,
                   formatter:function(value){
                   
                       return value.substring(0,3)+"...";
                   }
                },
                data: engineer
            },
            series: [
                {
                    name: '工程进度',
                    type: 'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            formatter: '{c}%'
                        }
                    },
                    data: data
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。[32, 35, 76, 89, 14, 53]
        myChart.setOption(option);
    }
    slideChanged2() {
        let currentIndex = this.slides2.getActiveIndex();
        // let pre=this.slides.getPreviousIndex;
        // if(pre==List.length-1)
        if (currentIndex <= this.projList.length - 1) {
            var proj = this.projList[currentIndex];
            this.onChangeProja(proj);
            this.selectproj = proj;
        }

    }
    onChangeProja(proj: any) {
        //EngineerCreate/GetProjectGroupList
        var that = this;
        // for (var index in this.myChildComponents2) {
        //     var item = this.myChildComponents2[index];
        //     let ctx = item.nativeElement;
        //     debugger;
        //     if (ctx.title == proj) {
        //         //this.projprogresschart0 = echarts.init(ctx);
        //         //EngineerCreate/MobileGetAll?GroupName
        //         await that.initdata(proj);

        //     }

        // }
        var num = 0;
        this.myChildComponents2.forEach((item) => {
            console.log(1);
            let ctx = item.nativeElement;
            if (ctx.title == proj) {
                //this.projprogresschart0 = echarts.init(ctx);
                //EngineerCreate/MobileGetAll?GroupName
                that.initdata(proj, num);
            }
            num++;

        })
    }
    onChangeProj(proj: any) {
        //EngineerCreate/GetProjectGroupList
        var that = this;
        // for (var index in this.myChildComponents2) {
        //     var item = this.myChildComponents2[index];
        //     let ctx = item.nativeElement;
        //     debugger;
        //     if (ctx.title == proj) {
        //         //this.projprogresschart0 = echarts.init(ctx);
        //         //EngineerCreate/MobileGetAll?GroupName
        //         await that.initdata(proj);

        //     }

        // }


        this.slides2.slideTo(this.projList.indexOf(proj), 500);
    }

}

